<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/jsp/WEB/pageLayout.xhtml">
	<ui:define name="centro">
		<h:form id="form">
			<p:panel header="Listagem de Tickets">

				<p:outputLabel value="Nº Ticket:" />
				<p:inputText value="#{RelTicketBean.text}" />
				<p:commandButton value="Buscar" image="ui-icon-search"
					update="@form" ajax="false" title="Localizar Ticket"
					actionListener="#{RelTicketBean.searchTicket()}" />

			</p:panel>
			<br />


			<p:dataTable id="Rel" value="#{RelTicketBean.rel}" var="rel"
				rowIndexVar="rowIndex" emptyMessage="Nenhum registro encontrado"
				style="position: auto;margin-top:40px" paginator="true" rows="20"
				rowsPerPageTemplate="10,20,30,40,50">

				<f:facet name="header">Clique na seta para expandir os detalhes</f:facet>
				<p:column style="width:16px">
					<p:rowToggler />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Empresa</f:facet>
					<h:outputText value="#{rel.company}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Operador</f:facet>
					<h:outputText value="#{rel.operador}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Ticket</f:facet>
					<h:outputText value="#{rel.idTicket}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Prisma</f:facet>
					<h:outputText value="#{rel.vehiclePrism}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Placa</f:facet>
					<h:outputText value="#{rel.vehiclePlate}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Cor</f:facet>
					<h:outputText value="#{rel.vehicleColor}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Tipo</f:facet>
					<h:outputText value="#{rel.vehicleType}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Marca</f:facet>
					<h:outputText value="#{rel.vehicleBrand}" />
				</p:column>

				<p:column style="width: 97px;">
					<f:facet name="header">Modelo</f:facet>
					<h:outputText value="#{rel.vehicleModel}" />
				</p:column>

				<p:rowExpansion>
					<h:panelGrid id="gridRel" columns="2" style="width:400px;border:0px;margin-top:1%;">

						<p:dataList style="width: 150px" value="#{rel.getVehicleBelongings()}" var="belongings" type="ordered">
							<f:facet name="header">Pertences</f:facet>#{belongings}
						</p:dataList>
						
						<p:dataList style="width: 150px" value="#{rel.getVehicleBreakdown()}" var="breakdown" type="ordered">
							<f:facet name="header">Avarias</f:facet>#{breakdown}
						</p:dataList>

					</h:panelGrid>
				</p:rowExpansion>

			</p:dataTable>

		</h:form>
	</ui:define>
</ui:decorate>
</html>